//获取拼接在url后的视频id
var str = location.search;
var params=new URLSearchParams(str);
var vid=params.get('vid');
//进入详情页插入一条历史记录
axios({
  url:"addhistory",
  method:"GET",
  params:{
    uid:nowuser.uid,
    vid:vid
  }
})
//根据vid请求相关信息
axios({
  url:'static/getdetailinfobyid',
  method:'get',
  params:{
    vid:vid
  }
}).then(function(res){
  console.log(res)
  let temp=res.data.data
  $('.videotopleft p').html(temp.detailTitle)
  $('.videotopleft input:eq(0)').html(temp.videoTime)
  $('.videotopright img').attr('src',temp.profilepic)
  $('.videotopright p').html('src',temp.username)
  $('.video video').attr('src',temp.detailUrl)
  $('.intro').html(temp.videoIntro)
})
//主评论框
$('.mycomment').prepend(`
  <img class="head" src="${nowuser.profilepic}" alt="">`)

//updatacomet 函数请求该视频的所有评论并且渲染
//maincomment主评论
//
function updatacomment(vid){
  axios({
    url:'getallcomment',
    method:"get",
    params:{
      videoid:vid 
    }
  }).then(function(res){
    if(res.data.data.main.length!=0){
       //拼接时清空原评论区
    $('.othercomment').empty()
    $(res.data.data.main).each(function(index,ele){
        $('.othercomment').append(`<div class="commentbox maincomment" data-cid=${ele.commentId}>
            <img class="head" src="${ele.profilepic}" alt="">
            <span class="username">${ele.username}</span>
            <p class="commentcontent">
                ${ele.commentContent}
            </p>
            <span class="commenttime">${ele.commentTime}</span>
            <button class="reply reply1">回复</button>
          </div>`)
          $(res.data.data.second).each(function(index1,ele1){
            if(ele1.replyId==ele.commentId){
              $(`[data-cid=${ele.commentId}]`).append(`<div class="commentbox replybox">
                <img class="head" src="${ele1.profilepic}" alt="">
                <span class="username">${ele1.username}</span>
                <p class="commentcontent">
                    ${ele1.commentContent}
                </p>
                <span class="commenttime">${ele1.commentTime}</span>
                <button class="reply reply2">回复</button>
              </div>`)
            }
          })
      })
    }
  })
  }
  updatacomment(vid);

//回复框
//1.回复主评论
$('.othercomment').on('click','.reply1',function(e){
  $('.replyinput').remove()
  let name=$(this).parent().find('.username').html()
  $(this).parent().append(`<div class="replyinput mycomment" data-type="2">
          <img class="head" src="${nowuser.profilepic}" alt="">
          <textarea type="text" placeholder="@${name}"></textarea>
          <button disabled="true" class="sendcomment">发布</button>
        </div>`)
})
//2.回复评论的评论
$('.othercomment').on('click','.reply2',function(e){
  $('.replyinput').remove()
  let name=$(this).parent().find('.username').html()
  $(this).parent().append(`<div class="replyinput mycomment" data-type="3">
          <img class="head" src="${nowuser.profilepic}" alt="">
          <textarea type="text" placeholder="@${name}"></textarea>
          <button disabled="true" class="sendcomment">发布</button>
        </div>`)
})
//主框获得焦点去除下方回复框
$('.mycomment textarea').focus(function(){
  $('.replyinput').remove()
})
//发布按钮无内容不可用
$(".comment").on('keyup','.mycomment textarea',function(){
  if(this.value==''||this.value==null){
    $(this).parents('.mycomment').find('.sendcomment').prop('disabled',true)
    $(this).parents('.mycomment').find('.sendcomment').css('cursor','default')
    $(this).parents('.mycomment').find('.sendcomment').css('color','gray')
  }else{
    $(this).parents('.mycomment').find('.sendcomment').css('cursor','pointer')
    $(this).parents('.mycomment').find('.sendcomment').css('color','white')
    $(this).parents('.mycomment').find('.sendcomment').prop('disabled',false)
  }
})

//发布评论
$('.comment').on('click','.mycomment .sendcomment',function(){
  //通过产生的输入框的自定义属性data-type来判断评论类型
   let commenttype=$(this).parent().attr('data-type');
   let rusername
   let commentContent
   let userid=nowuser.uid
   let commentid
   commentid=$(this).parents('.maincomment').attr("data-cid")
  //  "当前用户的id"

   userid=nowuser.uid
  //  "评论时间后端生成"
  
  // "视频id"
  // vid
  // "回复的内容"
  commentContent=$(this).parent().find('textarea').val()

  // "被回复的用户名"
  rusername=$(this).parent().find('textarea').attr("placeholder")
  //类型三的评论内容需要拼接@回复的用户
  if(commenttype==3){
    commentContent=rusername+"  "+commentContent;
  }
  
  //将评论提交到数据库
  axios({
    url:'addComment',
    method:'POST',
    data:{
      videoId:vid,
      userId:userid,
      replyId:commentid,
      commentContent:commentContent,
      commentType:commenttype
    }
  }).then(function(){
    //发送后移除输入框
    $('.replyinput').remove()
    $('.mycomment textarea').val('')
    //更新评论区
    $('.othercomment').empty()
    updatacomment(vid);
  })
})
//textarea 高度自适应
$('.mycomment textarea').keyup(function(e){
  $(this).css('height',`auto`)
  $(this).css('height',`${this.scrollHeight-10}px`)
})